<template>
  <div class="page_upAndDownstreamCompany">
    <van-sticky>
      <van-nav-bar :title="title" left-arrow @click-left="$router.back()">
        <template #right v-if="type === '0' || type === '3'">
          <van-icon name="ellipsis" size="18" @click="showOverlay = true" />
        </template>
      </van-nav-bar>
    </van-sticky>

    <!-- 发出去的申请不需要搜索和右侧的省略号   -->
    <van-search
      v-show="type === '0' || type === '3'"
      v-model="searchParams.keyword"
      placeholder="请输入下游企业名搜索"
      show-action
      shape="round"
      @search="onSearch"
      @clear="toClearKeyWord"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>

    <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
      <!-- 收到的申请     -->
      <van-cell-group class="layer" v-show="type == 0">
        <van-cell
          v-for="(item, index) in moreActionList_receivedApply"
          :key="index"
          :value="item.text"
          @click="handleShareAuth(item)"
        />
      </van-cell-group>

      <!-- 支付合作费     -->
      <van-cell-group class="layer" v-show="type == 3">
        <van-cell
          v-for="(item, index) in moreActionList_payCooperationFee"
          :key="index"
          :value="item.text"
          @click="handlePayCooperationFee(item)"
        />
      </van-cell-group>
    </van-overlay>

    <job-item-for-recruit
      :jobItem="needObj"
      :keyWord="'upstreamDownstreamManagement'"
      :routeName="$route.name"
      :type="type"
      :transmitStr="$route.query.transmitStr"
    ></job-item-for-recruit>

    <div class="contentCard">
      <van-divider
        v-if="type == 0 || type == 1"
        :style="{color: '#1989fa', borderColor: '#1989fa', padding: '0 60px', fontWeight: 'bolder'}"
      >
        {{ type == 0 ? '下游公司简介' : '上游公司简介' }}
      </van-divider>
      <com-filter-menu
        v-show="type == 0"
        :rightOptionObj="rightOptionObj"
        :rightOption="rightOption"
        :rightValue="searchParams.audit"
        @getFilterMenuValue="toGetFilterMenuValue_upAndDownstreamCompany"
      ></com-filter-menu>

      <!--  收到、发出的申请共用的组件    -->
      <com-multiple-checkbox-card
        v-show="type == 0 || type == 1"
        ref="checkbox"
        :dataList="upAndDownstreamCompanyList"
        :actionType="'add'"
        :keyWord="'upAndDownstreamCompany'"
        :type="type"
        @sendSelectedArr="sendSelectedArr"
      ></com-multiple-checkbox-card>

      <!-- 支付、收到的合作费 共用的组件    -->
      <div v-show="upAndDownstreamCompanyList.length && (type == 2 || type == 3)">
        <attention-pro
          :companyListData="upAndDownstreamCompanyList"
          :whichType="type"
          :job_id="this.needObj.id"
          ref="cooperationFeePage"
        />
      </div>
    </div>
  </div>
</template>

<script>
import jobItemForRecruit from '../recruitmentManagement/common/jobItemForRecruit'
import comMultipleCheckboxCard from '../companyHome/common/comMultipleCheckboxCard'
import comFilterMenu from '../../../components/comFilterMenu'
import attentionPro from './common/attentionPro'

import {Toast} from 'vant'

const rightOptionObj = {
  '-1': '全部',
  '0': '未授权',
  '1': '已授权',
  '2': '不授权'
}
const rightOption = [
  {text: '全部', value: '-1'},
  {text: '未授权', value: '0'},
  {text: '已授权', value: '1'},
  {text: '不授权', value: '2'}
]

export default {
  name: 'upAndDownstreamCompany',
  components: {
    comMultipleCheckboxCard,
    comFilterMenu,
    jobItemForRecruit,
    attentionPro
  },
  data() {
    return {
      searchBoxShow: false,
      rightOption,
      rightOptionObj,
      showOverlay: false,
      type: 0,
      upAndDownstreamCompanyList: [],
      title: '',
      moreActionList_receivedApply: [
        {
          id: '0',
          text: '授权'
        },
        {
          id: '1',
          text: '不授权'
        }
      ],
      moreActionList_payCooperationFee: [
        {
          id: '3',
          text: '支付合作费'
        }
      ],
      needObj: {},
      currentSelectedArr: [],
      currentSelectedAplist: [],
      companyItem: {},
      searchParams: {
        keyword: '',
        jobId: '',
        audit: '-1'
      }
    }
  },

  created() {
    if (this.$route.query.jobItem && this.$route.query.type && this.$route.query.title) {
      this.needObj = JSON.parse(this.$route.query.jobItem)
      this.type = this.$route.query.type
      this.title = this.$route.query.title
    } else {
      this.$router.back()
    }

    /*if (this.type == 3) {
      this.moreActionList = []
    } else if (this.type == 2) {
      this.moreActionList = [
        {
          id: 3,
          text: '支付合作费'
        }
      ]
    }*/
  },

  /*computed: {
  },
  beforeMount() {
    this.$root.$off().$on('cooperation.add', () => {
      this.popupShow = true
    })
  },*/
  mounted() {
    Object.assign(this.searchParams, {
      jobId: this.needObj.id
    })

    this._allNeedInitPageData()
  },
  methods: {
    _allNeedInitPageData() {
      this.$nextTick(() => {
        // 第1个和第4个页面是同一个接口，
        if (this.needObj.id && (this.type * 1 === 0 || this.type * 1 === 3)) {
          this._getApplyList()
        }

        // 第2个和第3个页面是同一个接口
        if (this.needObj.id && (this.type * 1 === 1 || this.type * 1 === 2)) {
          this._getApplyUpCompany()
        }
      })
    },

    async _getApplyList() {
      // 只有第4个页面，也就是支付的合作费
      const isCondition = this.type * 1 === 3
      const resp = await this.$api.job.getApplyList({
        ...this.searchParams,
        ...(isCondition && {type: 'CooperationFee'})
      })
      if (resp.code === 200) {
        this.upAndDownstreamCompanyList = resp.data.applylist
      }
    },

    async _getApplyUpCompany() {
      // 只有第3个页面，也就是收到的合作费
      const isCondition = this.type * 1 === 2
      // 只传值一个jobId
      const resp = await this.$api.job.getApplyCompany({
        jobId: this.needObj.id,
        ...(isCondition && {type: 'CooperationFee'})
      })
      if (resp.code === 200) {
        this.upAndDownstreamCompanyList = resp.data.company
      }
    },

    onSearch() {
      this.searchParams.pageIndex = 1
      if (this.searchParams.keyword.trim()) {
        this._allNeedInitPageData()
      } else {
        Toast('请先输入！')
      }
    },

    // 清空重置
    toClearKeyWord(isQuery = true) {
      if (!isQuery) {
        return null
      }
      this.searchParams.keyword = ''
      this.searchParams.pageIndex = 1
      this._allNeedInitPageData()
    },

    toGetFilterMenuValue_upAndDownstreamCompany(val) {
      console.log('传值', val)
      Object.assign(this.searchParams, {
        audit: val
      })
      this._allNeedInitPageData()
    },

    sendSelectedArr(currentSelectedArr, companyItem, currentSelectedAplist) {
      console.log('父组件接收', currentSelectedArr)
      this.currentSelectedArr = currentSelectedArr
      this.companyItem = companyItem
      this.currentSelectedAplist = currentSelectedAplist
    },

    // 是否授权可进行转发
    async handleShareAuth(item) {
      /*
       * this.currentSelectedArr 就是多选框出来的由id组成的数组，已经由子组件传递过来了。
       * */
      console.log('授权操作', item.text)
      if (!this.currentSelectedArr.length) {
        Toast('请至少选择一项')
        return null
      }

      const authParamsObj = {
        forwardid: this.currentSelectedArr.join(','),
        // 传参数 1 是进行授权， 2是不授权
        audit: item.id === '0' ? 1 : 2,
        auditmsg: Date.now()
      }
      const respResult = await this.$api.job.applySubmit(authParamsObj)
      if (respResult.code === 200) {
        console.log('结果走不走', respResult)
        Toast.success(respResult.data || '操作成功!')
        this._allNeedInitPageData()
        // 取消选中项
        this.$refs.checkbox.checkAllOrNot()
      }
    },

    /*
     * 支付合作费
     * */
    handlePayCooperationFee(item) {
      // console.log('支付合作费---父组件', item);
      this.$refs.cooperationFeePage.toViewCooperationMoney()
    }
  }
}
</script>

<style lang="scss" scoped>
.page_upAndDownstreamCompany {
  width: 100%;
  .over_layer {
    margin-top: 46px;
    height: 100%;
    .layer {
      width: 40%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 99999;
    }
  }

  .contentCard {
    min-height: 66vh;
  }
}
</style>
